<template>
  <div>
    全选: <input type="checkbox" v-model="listAll" /><button @click="revertFn">
      反选
    </button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="item.checked" />{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { checked: false, name: "猪八戒" },
        { checked: false, name: "孙悟空" },
        { checked: false, name: "唐僧" },
        { checked: false, name: "白龙马" },
      ],
    };
  },
  methods: {
    revertFn() {
      this.list.forEach((item) => (item.checked = !item.checked));
    },
  },
  computed: {
    // listAll() {
    // 全选逻辑
    // 依赖list中的每一项元素的checked属性
    // 如果,每个checked都为ture,那么listAll返回ture
    // 如果,有一个checked为false,那么listAll则返回false

    // every方法说明
    // every方法是数组遍历方法之一,接受一个回调函数
    // 回调函数返回一个布尔值,如果遍历的数组中每项结果都能让每个回调函数返回一个true,那么every()方法最终会返回true,如果遍历每项结果回调函数只要有一个返回结果为false,那么every()方法返回的就是false
    //   console.log(this.list.every((item) => item.checked));
    //   return this.list.every((item) => item.checked);
    // },
    listAll: {
      get() {
        return this.list.every((item) => item.checked);
      },
      set(checked) {
        this.list.forEach((item) => (item.checked = checked));
      },
    },
  },
};
</script>

<style>
</style>